<template>
  <div class="app-container detail">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="客户基本信息" name="1"> <BasicInfo :dataFrom="loanInfo"></BasicInfo> </el-tab-pane>
      <el-tab-pane label="客户财务信息" name="6"> <Finance :dataFrom="loanInfo"></Finance> </el-tab-pane>
      <el-tab-pane label="担保主体信息" name="2"> <Subject :dataFrom="loanInfo"></Subject> </el-tab-pane>
      <el-tab-pane label="押品信息" name="3"> <Collateral :dataFrom="loanInfo"></Collateral> </el-tab-pane>
      <el-tab-pane label="调查说明" name="4">
        <div><el-input v-model="description" type="textarea" /></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { ArrowLeft } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import router from "@/router";
import BasicInfo from "./basicInfo.vue";
import Collateral from "./collateral.vue";
import Finance from "./finance.vue";
import Subject from "./subject.vue";
import { getPubDetail, getPubDis } from "@/api/guarantee";
const route = useRoute();
const labelPosition = ref("right");
const activeName = ref("1");
const description = ref("");

const state = reactive({
  loanInfo: {}, //担保信息
});
const { loanInfo } = toRefs(state);

onMounted(() => {
  console.log(route.query.id, "8888");
});

function getDetail() {
  getPubDetail(route.query.id).then((res) => {
    console.log(res, "res");
    if (res.code == 200) {
      loanInfo.value = res.data;
      description.value = res.data.customerProfile.description;
    }
    // descript.value = loanInfo.value.customInfo.description;
  });
}

getDetail();
</script>
<style lang="scss" scoped>
.detail {
  overflow: hidden;
}
.bgc {
  background: #f2f2f2;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  padding-left: 20px;
}

:deep(.el-form-item--default) {
  margin-bottom: 5px;
  width: 40%;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-form-item) {
  margin-right: 120px;
}

.detail:deep(.el-step__line) {
  background: #fff;
  opacity: 0;
}
:deep(.el-step__icon.is-text) {
  border: 1px solid;
}
:deep(.el-step__icon) {
  height: 14px;
  width: 14px;
}
:deep(.el-steps) {
  background: #f2f2f2;
  margin-top: 3px;
}
:deep(.el-step.is-horizontal) {
  display: flex;
  padding-right: 5px;
}
:deep(.el-step__title) {
  line-height: 20px;
}
:deep(.el-step__main) {
  white-space: nowrap;
}
:deep(.el-step__head.is-finish) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-finish) {
  color: #333;
}
:deep(.el-step__head.is-wait) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-wait) {
  color: #333;
}
:deep(.el-step__title.is-process) {
  color: #333;
  font-weight: 400;
}
:deep(.el-step__head.is-process) {
  font-weight: none;
  color: #333;
  border-color: #333;
}
</style>
